import React, { useState, useRef } from 'react';
import _ from 'lodash';
import { Select, Button } from 'antd';
import DebounceWrapper from '@/components/DebounceWrapper';
import CommonTable from '@/components/CommonTable';
import ModifyModal from './components/modifyModal';
import { EditOutlined } from '@ant-design/icons';
import { fetchResponseCodeCategory, fetchResponseCodeData } from '@/services/system/responseCode';

const DebounceButton = DebounceWrapper(Button);

export default () => {
  const tableRef = useRef(null);
  const [modifyModalVisible, setModifyModalVisible] = useState(false);
  const [modifyModalOptions, setModifyModalOptions] = useState({});

  return (
    <>
      <CommonTable
        ref={tableRef}
        rowKey={'id'}
        indexRender
        header={{
          headerTitle: '响应码列表',
          headerToolsRender: true,
        }}
        request={async (params) => {
          const { records, total } = await fetchResponseCodeData(params);
          return { data: records, count: total };
        }}
        search={[
          {
            key: 'categoryCode',
            Component: Select,
            searchType: 'IN',
            props: {
              label: '码值分类',
            },
            componentProps: {
              allowClear: true,
              placeholder: '请选择码值分类',
              asyncOptions: {
                asyncRequest: async () => {
                  const res = await fetchResponseCodeCategory();
                  return {
                    options: _.map(res, ({ categoryCode, categoryName }) => ({
                      value: categoryCode,
                      label: categoryName,
                    })),
                  };
                },
              },
            },
          },
        ]}
        columns={[
          {
            title: '响应码',
            dataIndex: 'returnCode',
            columnControl: { typeList: 'search' },
          },
          {
            title: '码值分类',
            dataIndex: 'categoryName',
          },
          {
            title: '响应信息',
            dataIndex: 'returnMsg',
            columnControl: { typeList: 'search' },
          },
          {
            title: '操作',
            dataIndex: 'id',
            width: 108,
            fixed: 'right',
            render: (id, data) => {
              return (
                <>
                  <DebounceButton
                    type="link"
                    size="small"
                    icon={<EditOutlined />}
                    onClick={() => {
                      setModifyModalOptions(data);
                      setModifyModalVisible(true);
                    }}
                  >
                    编辑
                  </DebounceButton>
                </>
              );
            },
          },
        ]}
      />
      <ModifyModal
        visible={modifyModalVisible}
        options={modifyModalOptions}
        updateList={() => {
          const { refresh } = tableRef.current;
          refresh && refresh();
        }}
        closeModal={() => {
          setModifyModalVisible(false);
          setModifyModalOptions({});
        }}
      />
    </>
  );
};
